{% extends "youpu_base.html" %}
{% load static thumbnail %}

{% block title %}私信 - {{ block.super }}{% endblock %}

{% block css %}
    <link href="{% static 'css/messager.css' %}" rel="stylesheet">
{% endblock css %}

{% block content %}

    <div class="page-header">
        <h4>{{ request.user.get_profile_name }}的聊天记录</h4>
    </div>
    <div class="row">
        <div class="col-md-3">
            {% for user in users_list %}
                <a href="{% url 'youpu:messager_conversation_detail' user.username %}"
                   class="list-group-item list-group-item-action {% if active.username == user.username %}active{% endif %}">
                    {% thumbnail user.picture "x45" as im %}
                        <img src="{{ im.url }}" alt="用户头像">
                    {% empty %}
                        <img src="{% static 'img/user.png' %}" height="45px" alt="没有头像"/>
                    {% endthumbnail %}
                    {{ user.get_profile_name }}
                </a>
            {% endfor %}
        </div>
        <div class="col-md-9">
            <div class="messages-list">
                {% if message_list %}
                    {% for message in message_list %}
                        {% include 'youpu/messager/single_message.html' with message=message request=request %}
                    {% endfor %}
                {% else %}
                    <p>没有聊天记录</p>
                {% endif %}
                <li class="send-message"></li>
            </div>
            <hr>
            <div class="chat-box">
                <form role="form" method="post" action="#" id="send">
                    <div class="form-group">
                        {% csrf_token %}
                        <input type="hidden" name="to" value="{{ active.username }}">
                        <input class="form-control" type="text" name="message" placeholder="按回车发送消息" autocomplete="off">
                    </div>
                </form>
            </div>
        </div>

    </div>

{% endblock content %}

{% block js %}
    <script type="text/javascript">
        {#const activeUser = "{{ active }}";#}
        window.onload = $('.messages-list').scrollTop($('.messages-list')[0].scrollHeight);
    </script>
    {#    <script src="{% static 'js/messager.js' %}" type="text/javascript"></script>#}
    <script type="text/javascript">

        // 滚动条下拉到底
        function scrollConversationScreen() {
            $("input[name='message']").focus();
            $('.messages-list').scrollTop($('.messages-list')[0].scrollHeight);
        }

        // AJAX POST发送消息
        $("#send").submit(function () {
            $.ajax({
                {#url: '/messages/send-message/',#}
                url: "{% url "youpu:messager_send_message" %}",
                data: $("#send").serialize(),
                cache: false,
                type: 'POST',
                success: function (data) {
                    $(".send-message").before(data);  // 将接收到的消息插入到聊天框
                    $("input[name='message']").val(''); // 消息发送框置为空
                    scrollConversationScreen();  // 滚动条下拉到底
                }
            });
            return false;
        });

        // AJAX GET 接收消息
        {# 参数1为消息接受者id,you为消息发送者id #}

        function addNewMessage(me, you) {
            $.ajax({
                url: "/messages/receive-message/",
                url: "{% url "youpu:messager_receive_message" %}",
                type: "GET",
                data: {'me': me, 'you': you},
                cache: false,
                success: function (data) {
                    if (data === "good") {
                        //没有新消息，则不进行任何处理
                    } else if (data === "error") {
                        {#如果对方消息发送太快就直接刷新页面#}
                        window.location.href = "{% url "youpu:messager_messages_list" %}"
                    } else {
                        $(".send-message").before(data);  // 将接收到的消息插入到聊天框
                        scrollConversationScreen(); //滚动条下拉到底
                    }
                }
            });
        }

        //Ajax定时访问服务端，不断获取最新消息，这里是3秒请求一次。
        window.setInterval("addNewMessage({{ request.user.id }},{{ active.id }})", 3000);

    </script>
{% endblock js %}
